<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      爷爷
      <div class="dad">
        父亲
        <div>1111</div>
        <div>2222</div>
        <div class="son">儿子</div>
        <div>33333</div>
      </div>
    </div>
    <script>
      // 一、父关系；注意：父元素和父节点是一样的，都是元素；
      // var sonEle = document.querySelector(".son");
      // // 1.父元素 parentElement
      // // console.log( sonEle.parentElement);
      // // console.log( sonEle.parentElement.parentElement);
      // // 2.父节点
      // console.log( sonEle.parentNode);

      // 二、兄弟关系
      var sonEle = document.querySelector(".son");
      // 1.下一个元素 nextElementSibling
      // console.log( sonEle.nextElementSibling);
      // 2.下一个节点
      // console.log(sonEle.nextSibling);
      // 3.上一个兄弟元素
      // console.log(sonEle.previousElementSibling.previousElementSibling);
      // 4.上一个兄弟节点
      console.log(sonEle.previousSibling);

      // 三、删除元素；
      // 1.父元素.removeChild(子元素);
      // var containerEle = document.querySelector(".container");

      // var sonEle = document.querySelector(".son");

      // document.onclick = function(){
      //     containerEle.removeChild(sonEle);
      //     // sonEle.style.display = "none";
      // }

      // 2.自身元素.remove();
      // var sonEle = document.querySelector(".son");
      // document.onclick = function(){
      //     sonEle.remove();
      // }
    </script>
  </body>
</html>
